import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

// 脚手架路由系统的主配置文件
// 在该配置文件中，配置很多【资源路径】与【目标组件】之间的映射关系
// 不同的资源路径（路由地址）指向相应的目标组件

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  { 
    // 当访问：  http://localhost:8080/index  时，
    // 将会把Index.vue组件显示在占位符 <router-view /> 的位置
    path: '/index',   // 路由地址
    component: () => import('../views/Index.vue')   // 目标组件
  },
  { 
    path: '/login',   // 路由地址
    component: () => import('../views/Login.vue')   // 目标组件
  },
  { 
    path: '/register',   // 路由地址
    component: () => import('../views/Register.vue')   // 目标组件
  },
  { 
    path: '/detail',   // 路由地址
    component: () => import('../views/Detail.vue')   // 目标组件
  },
  { 
    path: '/basic',   // 路由地址
    component: () => import('../views/Basic.vue') // 目标组件
  },
  { 
    path: '/direct',   // 路由地址
    component: () => import('../views/Direct.vue') // 目标组件
  },
  { 
    path: '/vfor',   // 路由地址
    component: () => import('../views/VFor.vue') // 目标组件
  },
  { 
    path: '/form',   // 路由地址
    component: () => import('../views/Form.vue') // 目标组件
  },
  { 
    path: '/request',   // 路由地址
    component: () => import('../views/Request.vue') // 目标组件
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
